<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700|Londrina+Outline|Londrina+Solid" rel="stylesheet">
<link style="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/swing.css" />
<link style="text/css" rel="stylesheet" href="css/bootstrap.css">
<link style="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jq22-demo.css">
<link rel="stylesheet" type="text/css" href="style/basic.css"/>

<link icon>
<title>京东便利店</title>



<body>
	<div class="jq22-container">
		
	</div>
	<span class="container"></span>
	
	<script src="js/emojiCursor.js" type="text/javascript"></script>
</body>

<body background="image\beijing.png"
style=" background-repeat:no-repeat ;
background-size:100% 100%;
"
> 

</head>



<div class="container">
  <div class="row clearfix" >
    <div class="col-md-12">
      <nav class="navbar navbar-default" role="navigation" style="background-color:#e5564d" >

        <div class="navbar-header" > 
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button> 
            <a class="navbar-brand" href="#" div style="color: white" >京东便利店</a>
        </div>
      
        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
           
              <ul class="dropdown-menu">
              </ul>
         
          </ul>
         
          <ul class="nav navbar-nav navbar-right">
            <li>
               <a href="#url-" div style="color: white" a class="btn  btn-large" ><span class="glyphicon glyphicon-home" style="color: rgb(247, 225, 41);"></span>  主页 </a>
            </li>

            <li class="dropdown">
               <a href="#" div style="color: white" a class="btn  btn-large" ><span class="glyphicon glyphicon-heart"  style="color: rgb(247, 225, 41);"></span> 故事</a>
             
            </li>

            <li>
               <a href="#" div style="color: white" a class="btn  btn-large" ><span class="glyphicon glyphicon-pencil" style="color: rgb(247, 225, 41);"></span> 留言板</a>
            </li>

             <li>
              <a href="#" div style="color: white" a class="btn  btn-large" ><span class="glyphicon glyphicon-envelope" style=  "color: rgb(247, 225, 41);"></span> 联系我们</a>
            </li>

         
           

              </ul>
            </li>
          </ul>
        </div>
        
      </nav>
    </div>
  </div>
</div>


<!--大京东-->


<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
<head>
<meta charset="utf-8"> 

<body>
           <video src="image/shiping.mp4" controls width="400"  height="auto"  autoplay="autoplay"></video>

</body>

		</div>
	</div>
        
    <br>
    <br>
    <br>
</div>



<!--大京东完毕-->



<!--三海报-->

<div class="container">
	<div class="row clearfix">
		<div class="col-md-4 column">
			<img src="image/海报02_2.png" width="350" height="500"  class="img-thumbnail" />
		</div>
		<div class="col-md-4 column">
			<img src="image/海报03_3.png" width="350" height="500" class="img-thumbnail" />
		</div>
		<div class="col-md-4 column">
			<img src="image/海报01_1.png" width="350" height="500" class="img-thumbnail" />
		</div>
	</div>
</div>

<!--三海报完毕-->

<br>
<br>
<br>

<!--欢迎--> 

<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
		<body class="demo-swing" style="background-color:#1F1F1F">
  <main>
      <section class="content content--layout" style="height:190px;">
      <h2 class="word word--swing">Welcome&nbsp;&nbsp;to&nbsp;&nbsp;JD</h2>
      </section>
  </main>

<script src="js/charming.min.js"></script> 
<script src="js/anime.min.js"></script> 
<script src="js/demo4.js"></script>
       </body>
		</div>
	</div>
</div>

<!--欢迎完毕--> 



<!--故事一-->


<div class="container">
	<div class="row clearfix" >
		<div class="col-md-12 column"  style="background-color:white">
			<h1 class="text-center" style="color: pink">
				<strong>我 与 京 东 の 故 事</strong>
			</h1>
			<br>
			

			<div class="row clearfix">
				<div class="col-md-6 column" align="center" >
				<br>
					<img src="image/简历01.gif" width="450" height="450" class="img-circle" />
				</div>

				<div class="col-md-6 column">
					<h1 class="text-center" style="color: pink">简 历</h1>
						
				<br>
				<br>

					<h3>&nbsp;&nbsp;&nbsp;京东便利店打印人生第一份简历</h3>
					<h3>&nbsp;&nbsp;&nbsp;打印简历的那一天，天很蓝，阳光很灿烂</h3>

					<br>
					<h4>&nbsp; &nbsp;&nbsp;我和舍友商量好为接下来的新生活来一次狂欢</h4>
                    <h4>&nbsp; &nbsp;&nbsp;于是我去京东便利店，把我自己的u盘上的简历打印了一份 </h4>
                    <h4>&nbsp; &nbsp;&nbsp;顺便还买了一些零食、啤酒和火锅底料</h4>
        
                    <h4>&nbsp; &nbsp;&nbsp;买单的时候只要扫一扫，自动化结账，一下子就结束了</h4>
                    <br>
                <br>

                <p>
                  <div class="text-center"><a class="btn btn-primary btn-large" href="#"  style="background-color: pink" >了解更多</a>
                </p>
                <br>
                <br>
                <br>
                <br>

				</div>
			</div>
		</div>
	</div>

</div>

<!--故事一完毕-->


 <br>
 <br>
 <br>


<!--故事二-->



    <div class="row clearfix">
	    <div class="col-md-12 column " style="background-color:white">
		    <h1 class="text-center" style="color:pink">
		         <strong>我 与 京 东 の 故 事</strong>
		    </h1>
		    <br>

            
			    <div class="col-md-6 " align="center">
			     <br>
				  <img src="image/便当01.gif" width="450" height="450" class="img-circle"/>
			    </div>


		    <div class="row clearfix">
				    <div class="col-md-6 column">

					<h1 class="text-center" style="color: pink">
						便 当
					</h1>
					<br>
					<br>
					
					    <h3>&nbsp;&nbsp;沮丧时的一份便当</h3>

                        <h3>&nbsp;&nbsp;那个夜晚，我戴着耳机单曲循环</h3>
                        <br>

                        <h4>&nbsp;&nbsp;&nbsp;歌是花粥的《遥不可及的你》 </h4>
                        <h4>&nbsp;&nbsp;&nbsp;去了京东便利店买了一份便当，坐在路边。 </h4>
                        <h4>&nbsp;&nbsp;&nbsp;一想起那座城市和我所经受的孤独，胃有时还在隐隐泛酸</h4>
    
                        <h4>&nbsp;&nbsp;&nbsp;离开站时，偶然回头看了眼天空</h4>
                        <h4>&nbsp;&nbsp;&nbsp;想起了海子的那句：天空一无所有，何以给我安慰</h4>

                        <br>
                        <br>

                    <p>
                       <div class="text-center"><a class="btn btn-primary btn-large" href="#"  style="background-color: pink" >了解更多</a>
                    </p>

                    </div>
                <br>
                <br>
                <br>


                

            </div>
		</div>
		
	</div>

</div>

<!--故事二完毕-->

<br>
<br>
<br>

<!--故事三-->



	<div class="row clearfix" >
		<div class="col-md-12 column"  style="background-color:white">
			<h1 class="text-center" style="color: pink">
				<strong>我 与 京 东 の 故 事</strong>
			</h1>
			<br>
			
			

			<div class="row clearfix">
				<div class="col-md-6 column" align="center" >
				<br>
					<img src="image/失恋01.gif" width="450" height="450" class="img-circle" />
				</div>

				<div class="col-md-6 column">
					<h1 class="text-center" style="color: pink">失 恋</h1>
						
				<br>
				<br>

					<h3>&nbsp;&nbsp;&nbsp;失恋时的一杯 热咖啡</h3>
					<h3>&nbsp;&nbsp;&nbsp;那一天，我和他道了别</h3>

					<br>
					<h4>&nbsp;&nbsp;&nbsp;&nbsp;我不知道要走去哪，偶然进了一家京东便利店</h4>
                    <h4>&nbsp;&nbsp;&nbsp;&nbsp;这家便利店地方很小，但五脏俱全，特别像我和他之前住的地方</h4>
                    <h4>&nbsp;&nbsp;&nbsp;&nbsp;我来到咖啡台，点了一杯咖啡</h4>
        
                    <h4>&nbsp;&nbsp;&nbsp;&nbsp;店员递给我一张卡片，我以为是什么外卖卡片</h4>
                     <h4>&nbsp;&nbsp;&nbsp;&nbsp;卡片上面却写着：“每天要爱自己多一点。”</h4>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;那一刻，我不再压抑着，三年的眼泪。</h4>
                    <br>
                <br>

                <p>
                  <div class="text-center"><a class="btn btn-primary btn-large" href="#"  style="background-color: pink" >了解更多</a>
                </p>
                <br>
                <br>
             

				</div>
			</div>
		</div>
	</div>

</div>

<!--故事三完毕-->

<br>
<br>
<br>


	
<!--海报二-->
<div class="row clearfix">
  <div class="col-md-12 column">
	<div class="row clearfix">
		<div class="col-md-6 column">
			<img src="image/海报1.jpg" width="600" height="500" class="img-thumbnail" />
		</div>

		<div class="col-md-6 column">
			<img src="image/海报2.jpg" width="600" height="500" class="img-thumbnail" />
		</div>
	</div>
  </div>
</div>

<!--海报二完毕-->

<br>
<br>
<br>

<!--京东服务-->

	<div class="row clearfix" >
		<div class="col-md-12 column"  style="background-color:white" >
			<h1 class="text-center" style="color: pink"><strong>
             京 东 为 你
          </strong></h1>
				
		    
		    <br>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
		<div class="row clearfix">

				<div class="col-md-4 column" align="center">
					

                    <p class="popover-options">
		               <a  type="button"  
		                              data-container="body" 
		                    data-toggle="popover"  data-placement="right" data-content="
			                <h4>   ① 供 应 链 服 务  <br><br> ② 快递与速运服务 <br><br> ③ 云+科技服务
			                    
			                    </h4>">
			                 
			                <img src="image/icon_06.png" width="200" height="180" class="img-circle"  />
		               </a>
	                </p>
	            

					<p class="text-center" style="color: pink">
						 <strong><h3><div class="text-center" style="color: pink">京 东 物 流</h3></strong>京东物流 有速度更有温度
					
					</p>
				</div>

				<div class="col-md-4 column" align="center">
					<p class="popover-options">
		               <a  type="button"  
		                              data-container="body" 
		                    data-toggle="popover"  data-placement="right" data-content="
			                <h4>   ① 全球好物  <br><br> ② 网红爆款 <br><br> ③ 黑科技  
			                    
			                    </h4>">
			                 
			                <img src="image/icon_02.png" width="200" height="180" class="img-circle"  />
		               </a>
	                </p>
	            

					<p class="text-center" style="color: pink">
						 <strong><h3><div class="text-center" style="color: pink">甄 选 好 物</h3></strong>甄选，让你遇见腔调好物
					
					</p>
					
				</div>

				<div class="col-md-4 column" align="center">
					<p class="popover-options">
		              <a  type="button"  
		                              data-container="body" 
		                    data-toggle="popover"  data-placement="right" data-content="
			                <h4>   ① 上门取送服务  <br><br> ② 专业洗衣服务 <br><br> ③ 烘干衣服服务  
			                    
			                    </h4>">
			                 
			                <img src="image/icon_09.png" width="210" height="180" class="img-circle"  />
		               </a>
	                </p>
	            

					<p class="text-center" style="color: pink">
						 <strong><h3><div class="text-center" style="color: pink">洗 衣 服 务</h3></strong>让你的生活 多一点自在
					
					</p>
				
				</div>

                <script>
	               $(function () { $('.popover-show').popover('show');});
	               $(function () { $('.popover-hide').popover('hide');});
	               $(function () { $('.popover-destroy').popover('destroy');});
	               $(function () { $('.popover-toggle').popover('toggle');});
	               $(function () { $(".popover-options a").popover({html : true });});
                </script>
			</div>

			<br>
			<br>
			<br>



	
			<div class="row clearfix">
            <div class="col-md-4 column" align="center">
			 <p class="popover-options">
		               <a  type="button"  
		                              data-container="body" 
		                    data-toggle="popover"  data-placement="right" data-content="
			                <h4>   ① 代收包裹  <br><br> ② 取件方便 <br><br> ③ 自助寄件 
			                    
			                    </h4>">
			                <img src="image/icon_04.png" width="210" height="180" class="img-circle"  />
		               </a>
	                </p>
	            

					<p class="text-center" style="color: pink">
						 <strong><h3><div class="text-center" style="color: pink">快 递 架 子</h3></strong>让你的包裹更加安全 让你的生活更加方便
					
					</p>
				</div>


				<div class="col-md-4 column" align="center">
					 <p class="popover-options">
		               <a  type="button"  
		                              data-container="body" 
		                    data-toggle="popover"  data-placement="right" data-content="
			                <h4>   ① 家电维修服务  <br><br> ② 水管维修服务 <br><br> ③ 家居清洁服务  
			                    
			                    </h4>">
			                 
			                <img src="image/icon_07.png" width="210" height="180" class="img-circle"  />
		               </a>
	                </p>
	            

					<p class="text-center" style="color: pink">
						 <strong><h3><div class="text-center" style="color: pink">京 东 维 修</h3></strong>要维修？ 不害怕，有我在
					
					</p>
					
				</div>


				<div class="col-md-4 column" align="center">
					 <p class="popover-options">
		               <a  type="button"  
		                              data-container="body" 
		                    data-toggle="popover"  data-placement="right" data-content="
			                <h4>   ① 打印文档  <br><br> ② 极速打印 <br><br> ③ 打印清晰  
			                    
			                    </h4>">
			                 
			                <img src="image/icon_08.png" width="200" height="180" class="img-circle"  />
		               </a>
	                </p>
	            

					<p class="text-center" style="color: pink">
						 <strong><h3><div class="text-center" style="color: pink">自 助 打 印</h3></strong>从此，打印不再麻烦
					
					</p>
				
				<br>
				<br>
				

				</div>

			</div>

		</div>
	</div>
</div>

<!--京东服务完毕-->

<br>
<br>
<br>


<!--留言板-->

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column "  style="background-color:white">
      
         <h2><div class="text-center" ><span class="glyphicon glyphicon-pencil" style="color: pink;"></span> 留 言 板</h2>
        
          <br>
    
        </div>
    </div>
</div>


<div class="container">
<div class="row clearfix">


<head>
  <meta charset="utf-8"> 
  <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>



<div id="myCarousel" class="carousel slide" >
  <!-- 轮播（Carousel）指标 -->
  <ol class="carousel-indicators" >
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
  </ol>   
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner" >
    <div class="item active" align="center">
      <img src="image/9 (1).png" alt="First slide">
      <div class="carousel-caption" >1</div>
    </div>
    <div class="item" align="center">
      <img src="image/9 (2).png" alt="Second slide" >
      <div class="carousel-caption">2</div>
    </div>
    <div class="item" align="center">
      <img src="image/9 (3).png" alt="Third slide">
      <div class="carousel-caption">3</div>
    </div>
    <div class="item" align="center">
      <img src="image/9 (4).png" alt="Third slide">
      <div class="carousel-caption">4</div>
    </div>
    <div class="item" align="center">
      <img src="image/9 (5).png" alt="Third slide">
      <div class="carousel-caption">5</div>
    </div>
    <div class="item" align="center">
      <img src="image/9 (6).png" alt="Third slide">
      <div class="carousel-caption">6</div>
    </div>
     <br>
  </div>

  <!-- 轮播（Carousel）导航 -->
  
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ></span>
      <span class="sr-only" >Previous</span>
  </a>
   <br> 
   <br>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
      <br>
      <br>
  </a>
</div> 
    <br>
	</div>

</div>

<!--留言板完毕-->


<br>
<br>
<br>




<div class="col-sm-12 " style="background-color:white">
      
    <div class="container">
    
  
            <h2><div class="text-center" ><span class="glyphicon glyphicon-envelope" style="color: pink;"></span> 联 系 我 们</h2>
        


  <br>

  <div class="container">

    <div class="col-md-6 column">
      <h1><strong>Contact</strong>
        
      </h1>
      <div class="row clearfix">
        <div class="col-md-6 column">
          <h2><span class="glyphicon glyphicon-earphone" style="color: rgb(255, 147, 98);"> Phone</span>
           <br>
          </h2>
           <br>
         <p><h5>
                666-69696969
          </h5></p>
          
        </div>
        <div class="col-md-6 column">
          <h2><span class="glyphicon glyphicon-envelope" style="color: rgb(255, 147, 98);">  E-mail</span>
           
          </h2>
          <br>
          <p><h5> 66655bunz@126.com</h5>
            
          </p>
          
        </div>
      </div>

     
      <div class="row clearfix">
        <div class="col-md-6 column">
          <h2><span class="glyphicon glyphicon-home" style="color: rgb(255, 147, 98); "> Office</span>
            
          </h2>
          <br>
          <p><h5>广东省珠海市北京师范大学珠海分校设计学院</h5>
            
          </p>
          
        </div>
        <div class="col-md-6 column">
          <h2><span class="glyphicon glyphicon-question-sign" style="color: rgb(255, 147, 98); ">   Help</span>
            
          </h2>
          <br>
          <p><h5>
            在右边留下你的联系方式
          </h5></p>
          
        </div>
      </div>
    </div>


 


<div style="padding: 10px 10px 10px;">

<ul><img src="image\i1.png" width="500" height="80" />
  <form class="bs-example bs-example-form" role="form">
  
  <br>
    <div class="input-group">
      <span class="input-group-addon">Name</span>
      <input type="text" class="form-control" placeholder="Pujing Yao">
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon">Phone</span>
      <input type="text" class="form-control" placeholder="158432115">
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon">E-mail</span>
      <input type="text" class="form-control" placeholder="adfhe@126.com">
    </div>
    <br>
    
              <p>
                  <div class="navbar-right"><a class="btn btn-primary btn-large" href="#"  style="background-color: pink" >Enter</a>
              </p>
              <br>
              <br>



</div>



    </div>
  </div>
  <div class="row clearfix">
    <div class="col-md-12 column">
    <p class="text-center">
        <u> Copyright   2018-2019   京东便利店. All Rights Reserved    网站管理者：449组合 </u>
      </p>
      <br>
    </div>
  </div>
</div>


